<template>
  <div class="modulesTitle-container breadcrumb-title" :class="device == 'mobile' ? 'mobile-titleContainer': !sidebar.opened ? 'no-left-sidebar':''"  >
    <div class="title-left">
<!--      <breadcrumb class="breadcrumb-container" />-->
      <meta-breadcrumb></meta-breadcrumb>
    </div>
    <div class="title-right">
      <div class="other">
        <slot name="other"></slot>
      </div>
      <div class="btn">
        <slot name="btn"></slot>
      </div>
    </div>

  </div>
</template>

<script>
    import Breadcrumb from '@/components/Breadcrumb'
    export default {
        name: "index",
        components:{
            Breadcrumb,
        },
        props: {
            titleName: {
                type: String,
                default: '标题名称'
            }
        },
        computed: {
            sidebar() {
                return this.$store.state.app.sidebar
            },
            device() {
                return this.$store.state.app.device
            },
        },
    }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/components/modulesTitle.scss";

  .breadcrumb-title{
    .el-breadcrumb{
      font-size: 16px;
    }
  }

</style>
